<template>
	<view class="page zdyNavTop">
		<div class="navBar" :style="{top:0,height:navBarHeight}">
			<image v-if="toTitle!='消息'" src="@/static/bgt.png" :style="{top:0,height:navBarHeight}"></image>
			<view class="views" v-if="toTitle=='消息'" :style="{top:0,height:navBarHeight}"></view>
			<view class="headerBar" :style="{top:top,height:height}">
				<view style="position: absolute;left: 10px;" v-if="showBack">
					<uni-icons type="left" size="20" @click="navBack()"></uni-icons>
				</view>
				<view>{{title}}</view>
			</view>
		</div>


		<view class="line" :style="{marginTop:navBarHeight}">

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			showBack: {
				type: Boolean,
				default: true,
			},
			toTitle: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				top: '',
				height: '',
				navBarHeight: '',
				title: this.toTitle
			};
		},

		onLoad() {

		},
		mounted() {
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const res = uni.getSystemInfoSync();
			let {
				statusBarHeight
			} = res;
			let {
				top,
				height,
				bottom
			} = menuButtonInfo;
			//顶部距离 
			this.top = top + 'px';
			//胶囊高度
			this.height = height + 'px';
			//顶部导航栏高度
			let wrap = bottom - height - statusBarHeight;
			this.navBarHeight = bottom + wrap + 'px';
		},
		methods: {
			navBack() {
				uni.navigateBack()
			},
		},


	}
</script>

<style lang="scss">
	.navBar {
		width: 100%;
		position: fixed;
		left: 0;
		z-index: 99;
	}

	.navBar .views {
		background: #fff;
	}

	.navBar image {
		width: 100%;
	}

	.headerBar {
		display: flex;
		position: absolute;
		width: 100%;
		z-index: 999;
		justify-content: center;
		text-align: center;
		align-items: center;
	}
</style>